
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
	<script type="text/javascript"
		src="http://maps.google.com/maps/api/js?sensor=false"></script>

	<script type="text/javascript">
		function initia(domicilioDesde, domicilioHasta) {

			var directionsDisplay;
			var directionsService = new google.maps.DirectionsService();
			var map;
			var oldDirections = [];
			var currentDirections = null;
			var cordoba = " ,Cordoba, Argentina";
			var direccion = domicilioDesde; /* '#{busquedaplayaMB.direccionDesde}'; */
			var start = direccion.concat(cordoba);
			var fin = domicilioHasta; /*'#{busquedaplayaMB.playaselected.domicilio}';*/
			var end = fin.concat(cordoba);
			var request = {
				origin : start,
				destination : end,
				travelMode : google.maps.DirectionsTravelMode.DRIVING
			}
			var myOptions = {
				zoom : 13,
				center : new google.maps.LatLng(#{busquedaplayaMB.latitudCentro},#{busquedaplayaMB.longitudCentro}),
				mapTypeId : google.maps.MapTypeId.ROADMAP
			}
			map = new google.maps.Map(document.getElementById("map_canvas"),
					myOptions);

			directionsDisplay = new google.maps.DirectionsRenderer({
				'map' : map,
				'preserveViewport' : true,
				'draggable' : true
			});
			directionsDisplay.setPanel(document
					.getElementById("directions_panel"));

			directionsService.route(request, function(response, status) {
				if (status == google.maps.DirectionsStatus.OK) {
					directionsDisplay.setDirections(response);
				}
			});
			
			dlg2.show();
		}

		function undo() {
			currentDirections = null;
			directionsDisplay.setDirections(oldDirections.pop());
			if (!oldDirections.length) {
				setUndoDisabled(true);
			}
		}

		function setUndoDisabled(value) {
			document.getElementById("undo").disabled = value;
		}
	</script>

	<h:form id="form">
		<p:growl id="messages" showSummary="false" autoUpdate="true"
			globalOnly="true" />

		<div align="left" style="margin: 10px 0 10px 0;">
			<p:panel>
				<h:panelGrid columns="1" width="100%" cellspacing="5"
					cellpadding="5">
					<h:panelGrid columns="2" width="80%">
						<p:column style="vertical-align:text-center;">
							<h:panelGrid columns="2">
								<p:column>
									<p:watermark for="direccionBusqueda"
										value="Dirección de búsqueda" />
									<p:inputText id="direccionBusqueda"
										value="#{busquedaplayaMB.direccionBusqueda}" required="true"
										requiredMessage="Campo dirección de búsqueda obligatorio"
										style="width:250px;">
										<p:ajax event="blur" update="direccionBusquedaMsg" />
									</p:inputText>
								</p:column>
								<p:column>
									<p:message id="direccionBusquedaMsg" display="icon"
										for="direccionBusqueda" />
								</p:column>
							</h:panelGrid>
						</p:column>
						<p:column>
							<div align="center">
								<h:outputLabel value="N° de cuadras: " />
								<h:outputLabel id="nroCuadras"
									value="#{busquedaplayaMB.distancia}" />
								<h:inputHidden id="distancia"
									value="#{busquedaplayaMB.distancia}" />
								<p:slider for="distancia" minValue="1" maxValue="50"
									style="width:100px;" update="nroCuadras" display="nroCuadras" />
							</div>
						</p:column>
					</h:panelGrid>

					<h:panelGrid columns="5" cellspacing="5" cellpadding="5"
						width="100%">
						<p:column style="vertical-align:text-center;">
							<p:selectOneMenu value="#{busquedaplayaMB.categoriaParameter}"
								effect="fade" style="width:160px;height:25px;line-height:17px;">
								<f:selectItem itemLabel="Todas las categorías"
									itemValue="#{null}" />
								<f:selectItems
									value="#{categoriaVehiculoMB.categoriaVehiculoList}"
									var="categoria" itemValue="#{categoria}"
									itemLabel="#{categoria.nombre}" />
								<f:converter converterId="categoriaVehiculoConverter" />
							</p:selectOneMenu>
						</p:column>

						<p:column style="vertical-align:text-center;">
							<p:selectOneMenu value="#{busquedaplayaMB.tipoEstadiaParameter}"
								effect="fade" style="width:160px;height:25px;line-height:17px;">
								<f:selectItem itemLabel="Todas los tipos estadías"
									itemValue="#{null}" />
								<f:selectItems value="#{tipoEstadiaMB.tipoEstadiaList}"
									var="tipoEstadia" itemValue="#{tipoEstadia}"
									itemLabel="#{tipoEstadia.nombre}" />
								<f:converter converterId="tipoEstadiaConverter" />
							</p:selectOneMenu>
						</p:column>

						<p:column style="vertical-align:text-center;">
							<div align="right">
								<h:panelGrid columns="2">
									<p:selectBooleanCheckbox id="check"
										value="#{busquedaplayaMB.checkPromociones}" />
									<p:outputLabel for="check" value="Sólo con promociones" />
								</h:panelGrid>
							</div>
						</p:column>
						<p:column>
							<div align="right">
								<p:commandButton id="btnBuscarAvanzado" update="playas,mapa"
									value="Buscar" action="#{busquedaplayaMB.busquedaAvanzada}"
									ajax="false" icon="ui-icon-search" style="width:85px;" />
							</div>
						</p:column>
					</h:panelGrid>
				</h:panelGrid>
			</p:panel>
		</div>



		<div>
			<p:panel>
				<f:view contentType="text/html">
					<!-- 				<h1>Playas encontradas:</h1> -->
					<script src="http://maps.google.com/maps/api/js?sensor=false"
						type="text/javascript"></script>

					<p:gmap center="#{busquedaplayaMB.coordenadas}" zoom="14"
						type="ROADMAP" model="#{busquedaplayaMB.advancedModel}"
						style="width:99,5%; height:350px;">

						<p:ajax event="overlaySelect"
							listener="#{busquedaplayaMB.onMarkerSelect}" />

						<p:gmapInfoWindow>

							<ui:fragment
								rendered="#{busquedaplayaMB.marker.data.playa == null}">
								<div align="center">
									<ui:fragment rendered="#{busquedaplayaMB.usuario == null}">
										<h:outputText style="font-weight:bold;" value="¡Usted está aquí!" />
									</ui:fragment>

									<ui:fragment rendered="#{busquedaplayaMB.usuario != null}">
										<h:panelGrid column="1" style="text-align:center;"
											cellspacing="0px" cellpadding="0px">

											<p:column>
												<h:graphicImage library="fotos_perfil_usuarios"
													name="sinfoto.jpg"
													styleClass="bordes-foto-perfil-comentario"
													rendered="#{busquedaplayaMB.usuario.fotoUsuario == null}" />
												<h:graphicImage library="fotos_perfil_usuarios"
													name="#{busquedaplayaMB.usuario.nombreUser}.jpg"
													styleClass="bordes-foto-perfil-comentario"
													rendered="#{busquedaplayaMB.usuario.fotoUsuario != null}" />
											</p:column>
											<p:column>
												<h:outputText style="font-weight:bold;"
													value="#{busquedaplayaMB.usuario.nombre} #{busquedaplayaMB.usuario.apellido}" />
											</p:column>
											<p:column>
												<h:link id="linkUsuario" tittle="Ir a mi perfil"
													value="Ir a mi perfil" outcome="/cliente/perfilcliente" />
											</p:column>

										</h:panelGrid>
									</ui:fragment>

								</div>
							</ui:fragment>

							<ui:fragment
								rendered="#{busquedaplayaMB.marker.data.playa != null}">
								<div align="center">
									<h:panelGrid column="1" style="text-align:center;"
										cellspacing="0px" cellpadding="0px">
										<p:column>
											<h:graphicImage library="fotos_perfil_playas"
												name="#{busquedaplayaMB.marker.data.id}_#{busquedaplayaMB.marker.data.nombreFoto}"
												styleClass="bordes-foto-perfil-comentario"
												rendered="#{busquedaplayaMB.marker.data.nombreFoto != null}" />
											<h:graphicImage library="fotos_perfil_playas"
												name="sinfoto.jpg"
												styleClass="bordes-foto-perfil-comentario"
												rendered="#{busquedaplayaMB.marker.data.nombreFoto == null}" />
										</p:column>
										<h:outputText style="font-weight:bold;"
											value="#{busquedaplayaMB.marker.data.playa.nombreComercial}" />

										<h:outputText
											value="#{busquedaplayaMB.marker.data.playa.domicilio} - #{busquedaplayaMB.marker.data.playa.barrio.nombre}" />

										<h:link id="link" tittle="Ir a playa" value="Ver información"
											outcome="/viewperfilplaya.html?id=#{busquedaplayaMB.marker.data.playa.id}" />

									</h:panelGrid>
								</div>
							</ui:fragment>
						</p:gmapInfoWindow>
					</p:gmap>
				</f:view>
			</p:panel>
		</div>

		<div style="margin: 5px;">
			<p:dataTable id="playas" var="playa" paginator="true"
				paginatorPosition="bottom" rows="5"
				emptyMessage="¡No existen playas!"
				value="#{busquedaplayaMB.playaResultadoBusqueda}">

				<p:column headerText="Nombre Comercial" styleClass="column-font">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{playa.nombreComercial}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{playa.nombreComercial}"
								styleClass="input-font" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="Barrio" styleClass="column-font">
					<h:outputText value="#{playa.barrio.nombre}" />
				</p:column>

				<p:column headerText="Domicilio" styleClass="column-font">
					<h:outputText value="#{playa.domicilio}" />
				</p:column>

				<p:column headerText="Perfil" style="text-align:center; width:50px;">
					<h:link id="verPerfil" title="Ver perfil"
						outcome="/viewperfilplaya.html?id=#{playa.id}">
						<h:graphicImage library="images/icons" name="go.png" />
					</h:link>
				</p:column>
				<p:column headerText="Ruta" style="text-align:center; width:50px;">
					<p:commandLink id="view2" oncomplete="dlgOrigen.show();"
						title="¿Cómo llegar a esta playa?" update=":dlgO" process="@this">
						<f:setPropertyActionListener value="#{playa}"
							target="#{busquedaplayaMB.playaselected}" />
						<h:graphicImage library="images/icons" name="search-map.png"
							style="height:40px; width:40px" />
					</p:commandLink>
				</p:column>
			</p:dataTable>
		</div>
		<!-- 	</h:form> -->

		<p:dialog widgetVar="dlg2" width="800" height="400" modal="true"
			id="dialog" draggable="false" closable="true">

			<!-- 		<h:form id="frmComoLlegar"> -->
			<f:facet name="header">
				<h:outputText value="¿Cómo llegar a la playa?" />
			</f:facet>
			<div id="map_canvas" style="float: left; width: 65%; height: 100%"></div>
			<div style="float: right; width: 35%; height: 100%; overflow: auto">
				<div id="directions_panel" style="width: 100%"></div>
			</div>
			<f:facet name="footer" style="text-align=right;">
				<p:commandButton id="undo" value="Volver"
					style="float:right; width:274px; height: 42px" onclick="undo();"></p:commandButton>
			</f:facet>
		</p:dialog>
	</h:form>

	<p:dialog header="Dirección de origen" id="dlgO" widgetVar="dlgOrigen"
		resizable="false" closable="true">
		<h:form id="frmComoLlegar">

			<h:panelGrid columns="2" cellspacing="10" cellpadding="10">
				<h:outputLabel for="dirOrigen" value="Dirección de origen: " />
				<p:inputText id="dirOrigen" required="true"
					value="#{busquedaplayaMB.direccionDesde}"
					onkeyup="if (event.keyCode == 13) { document.getElementById(':frmComoLlegar:siguiente').click(); return false; }" />
				<p:column />
				<p:column>
					<div align="right">
						<p:commandButton id="siguiente" value="Siguiente" ajax="true"
							onclick="initia(jQuery('#frmComoLlegar\\:dirOrigen').val(), '#{busquedaplayaMB.playaselected}');"
							update=":dialog" process="@this"
							action="#{busquedaplayaMB.tomarDomicilioDesde}" />
					</div>
				</p:column>
			</h:panelGrid>
		</h:form>
	</p:dialog>
</ui:composition>


